<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <button>首页</button>
        <button>服务</button>
        <button>个人中心</button>
    </div>

    <div class="content"></div>

    <script>
        //定义个路由表
        var routes = [
            { path:'/home', component: home_page },
            { path:'/service', component: service_page },
            { path:'/mine', component: mine_page },
        ]

        //给多个标签绑定事件
        var btns = [...document.querySelectorAll('button')];
        btns.forEach((item,index)=>{
            console.log(item);
            item.onclick = function(e){
                e.preventDefault();
                //调用history.pushState() 添加一个新的历史记录( 同时实现路由地址的切换 )
                history.pushState({},'', routes[index].path )
                routes[index].component();  
            }
        })

        //渲染首页的内容
        function home_page(){
            document.querySelector('.content').innerHTML = '首页的内容';
        }
        //渲染服务的内容
        function service_page(){
            document.querySelector('.content').innerHTML = '服务的内容';
        }
        //渲染个人中心的内容
        function mine_page(){
            document.querySelector('.content').innerHTML = '个人中心的内容';
        }
    </script>
</body>
</html>